import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { View, StyleSheet } from 'react-native'

export default class extends Component {
  static propTypes = {
    width: PropTypes.any,
    heigth: PropTypes.any,
    type: PropTypes.any,
  }
  render() {
    const { width, height, type } = this.props
    const params = {}
    if (width !== undefined) {
      params.width = width
    }
    if (height !== undefined) {
      params.height = height
    }
    let leftShow = false
    let rightShow = false
    const topShow = false
    const bottomShow = false

    if (type === 'leftRight') {
      leftShow = true
      rightShow = true
    }

    return (
      <View style={params}>
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View style={styles.one} />
          {topShow && <View style={{ width: 1, backgroundColor: 'red' }} />}
          <View style={styles.two} />
        </View>
        <View style={{ height: 1 }}>
          {leftShow && <View style={{ flex: 1, backgroundColor: 'red' }} />}
          {rightShow && <View style={{ flex: 1, backgroundColor: 'red' }} />}
        </View>
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View style={styles.three} />
          {bottomShow && <View style={{ width: 1, backgroundColor: 'red' }} />}
          <View style={styles.four} />
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  one: {
    flex: 1,
  },
  two: {
    flex: 1,
  },
  three: {
    flex: 1,
  },
  four: {
    flex: 1,
  },
})
